<template>
    <img :src="showPrice ? require('../assets/arrow-red.png') : require('../assets/arrow-down.png')" @click="sort"
        :class="{ active: isUp }">

</template>
<script>
export default {
    props: {
        showPrice: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isUp: false
        }
    },
    methods: {
        sort() {
            this.isUp = !this.isUp
            this.$emit('sort', this.isUp);
        }
    }
}
</script>
<style lang="scss" scoped>
.active {
    transform: rotate(180deg);
}
</style>